<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="/css/bootstrap.min.css" rel="stylesheet">
		<link href="/css/font-awesome.css" rel="stylesheet">
		<link href="/css/datatables.min.css" rel="stylesheet">
		<link href="/css/animate.css" rel="stylesheet">
		<link href="/css/style.css" rel="stylesheet">
		<script src="/js/jquery-3.1.1.min.js"></script>
		<script src="/js/bootstrap.min.js"></script>
		<script src="/js/vue.js" ></script>
	</head>
	<body style="background-color:whitesmoke">
	<div id="myapp">
		<div class="row wrapper border-bottom white-bg page-heading">
			<div class="col-lg-10">
				<h2>考试管理</h2>
				<ol class="breadcrumb">
					<li>
						<a href="index.html">主页</a>
					</li>
					<li>
						<a>表格</a>
					</li>
					<li class="active">
						<strong>数据表格</strong>
					</li>
				</ol>
			</div>
		</div>

		<div class="wrapper wrapper-content animated fadeInRight" >

			<div class="ibox-content m-b-sm border-bottom">
				<div class="row">
					<form role="form" class="form-horizontal">
						<div class="form-group">
							<label class=" col-sm-2 control-label">姓名</label>
							<div class=" col-sm-2">
								<input type="text" class="form-control" id="name" placeholder="请输入试卷名">
							</div>
							<label class=" col-sm-2 control-label">姓名</label>
							<div>
								<button class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-zoom-in"></span> 查询</button>
								<button class="btn btn-primary btn-sm" type="button" @click="add()"><span class="glyphicon glyphicon-plus"></span> 新增</button>
							</div>
						</div>
					</form>

				</div>

			</div>
			<div class="row">
				<div class="col-lg-12">

					<div class="ibox float-e-margins">

						<div class="ibox-content">
							<table class=" table table-stripped " data-page-size="15" >
								<thead>
									<tr>
										<th data-hide="true">试卷ID</th>
										<th data-hide="phone">试卷名称</th>
										<th data-hide="all">选择题个数</th>
										<th data-hide="phone">多选题个数</th>
										<th data-hide="phone">判断题个数</th>
										<th data-hide="phone">简答题个数</th>
										<th data-hide="phone">准考班级</th>
										<th data-hide="phone">开始时间</th>
										<th data-hide="phone">结束时间</th>
										<th data-hide="phone,tablet">生成人</th>
										<th class="text-right" data-sort-ignore="true">试卷操作</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="x in list">
										<td>{{x.testPaperId}}</td>
										<td>{{x.testPaperName}}</td>
										<td>{{x.selectTopic}}</td>
										<td>{{x.multipleTopic}}</td>
										<td>{{x.judgeTopic}}</td>
										<td>{{x.shortTopic}}</td>
										<td >{{x.readyClass}}</td>
										<td>{{x.startTime}}</td>
										<td>{{x.endTime}}</td>
										<td>{{x.handler}}</td>
										<td>{{x.status}}</td>
										<td class="text-right">
											<button class="btn-primary btn btn-sm" @click="updata(x)"><span class="glyphicon glyphicon-tag"></span> 编辑</button>
											<button class="btn-primary btn btn-sm" @click="del(x)"><span class="glyphicon glyphicon-trash"></span> 删除</button>
										</td>
									</tr>
								</tbody>
							</table>

						</div>
					</div>
				</div>

			</div>
		</div>
		<div>
			一共{{totalPage}}页,当前{{curPage}}页
			<button class="btn-sm btn-success" type="button" @click="prePagemethod()">上一页</button>
			<button class="btn-sm btn-success" type="button" @click="nextPagemethod()">下一页</button>
			<button class="btn-sm btn-success" type="button" @click="indexPage()">首页</button>
			<button class="btn-sm btn-success" type="button" @click="endPage()">尾页</button>
			跳转到<input class="input-group-lg" type="text">页
			<button class="btn-primary btn btn-sm" type="button" @click="changePage()">跳转</button>
			<select  @change="">
				<option value="3">每页3条</option>
				<option value="5">每页5条</option>
				<option value="10">每页10条</option>
			</select>
		</div>
		<!-- 模态框开始 -->
		<div id="one" class="modal fade" style="top:200px">
			<div class="modal-dialog">

				<div class="modal-content">
					<!--头部-->
					<div class="modal-header">
						<h2 align="center">{{title}}</h2>
					</div>
					<!--主题内容-->
					<div class="modal-body">
						<form role="form" class="form-horizontal">

							<div class="form-group">
								<label class=" col-sm-2 control-label">试卷名称</label>
								<div class=" col-sm-10">
									<input type="text" class="form-control" v-model="testPaper.testPaperName" placeholder="请输入姓名">
								</div>
							</div>

							<div class="form-group">
								<label class=" col-sm-2 control-label">选择题个数</label>
								<div class=" col-sm-10">
									<input type="text" class="form-control" v-model="testPaper.selectTopic" placeholder="请输入姓名">
								</div>
							</div>

							<div class="form-group">
								<label class=" col-sm-2 control-label">多选题个数</label>
								<div class=" col-sm-10">
									<input type="text" class="form-control" v-model="testPaper.multipleTopic" placeholder="请输入姓名">
								</div>
							</div>

							<div class="form-group">
								<label class=" col-sm-2 control-label">简答题个数</label>
								<div class=" col-sm-10">
									<input type="text" class="form-control" v-model="testPaper.judgeTopic" placeholder="请输入姓名">
								</div>
							</div>

							<div class="form-group">
								<label class=" col-sm-2 control-label">准考班级</label>
								<div class=" col-sm-10">
									<input type="text" class="form-control" v-model="testPaper.shortTopic" placeholder="请输入姓名">
								</div>
							</div>

							<div class="form-group">
								<label class=" col-sm-2 control-label">开始时间</label>
								<div class=" col-sm-10">
									<input type="text" class="form-control" v-model="testPaper.readyClass" placeholder="请输入姓名">
								</div>
							</div>

							<div class="form-group">
								<label class=" col-sm-2 control-label">结束时间</label>
								<div class=" col-sm-10">
									<input type="text" class="form-control" v-model="testPaper.startTime" placeholder="请输入姓名">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2  control-label">生成时间</label>
								<div class=" col-sm-10">
								<input type="text" class="form-control" v-model="testPaper.endTime" placeholder="请输入姓名">
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-2  control-label">生成人</label>
								<div class=" col-sm-10">
								<input type="text" class="form-control" v-model="testPaper.handler" placeholder="请输入姓名">
								</div>
							</div>
						</form>
					</div>

					<!--底部-->
					<div class="modal-footer">
						<button class="btn btn-primary btn-sm" type="button" @click="closeWin()"><span class="glyphicon glyphicon-remove"></span>关闭</button>
						<button class="btn btn-primary btn-sm" type="button" @click="saveTestPaper()"><span class="glyphicon glyphicon-save"></span>保存</button>
					</div>

				</div>
			</div>
		</div>

		</div>
	</body>

	<script>
		//显示模态框
		new Vue({
			el:"#myapp",
			data:{
				list:[],
				testPaper:{
					testPaperId:0,
					testPaperName:'',
					selectTopic:0,
					multipleTopic:0,
					judgeTopic:0,
					shortTopic:0,
					readyClass:'',
					startTime:'',
					endTime:'',
					handler:0,
					status:0
				},
				title:"考试修改",
				total:0,//总条数
				prePage:0,//上一页
				nextPage:0,//下一页
				curPage:0,//当前页
				totalPage:0,//总页数
				page:1,
				row:5,

			},
			methods:{
				loadData:function () {
					var self=this;
					$.ajax({
						url:"/exam/getAllExam",
						type:"post",
						contentType:"application/x-www-form-urlencoded",
						data:{"page":self.page,"row":self.row},
						dataType:"json",
						success:function (data) {
							self.list=data.list;
							self.totalPage=data.totalPage;
							self.total=data.total;
							self.prePage=data.prePage;
							self.nextPage=data.nextPage;
							self.curPage=data.curPage;
						}
					})
				},
				add :function() {
					this.title="用户增加";
					$("#one").modal("show")
				},
				del:function(x){
					var self=this
					var is=confirm("你确定要删除"+x.testPaperId+"吗")
					if(is){
						$.ajax({
							url:"/exam/deleTestPaper",
							type:"post",
							contentType:"application/x-www-form-urlencoded",
							data:{"id":x.testPaperId},
							dataType:"json",
							success(data){
								console.log(data.info);
								self.loadData();
							}
						})
					}
				},
				updata:function(x){
					this.testPaper=x;
					this.title="试卷修改";
					$("#one").modal("show")
				},
				prePagemethod:function(){
					this.page=this.prePage;
					this.loadData();
				},
				nextPagemethod:function(){
					this.page=this.nextPage;
					this.loadData();
				},
				indexPage:function(){
					this.curPage=1;
					this.loadData();
				},
				endPage:function(){
					this.curPage=this.totalPage;
					this.loadData();
				},
		//提交修改,增加
		saveTestPaper:function (){
			var self=this;
			var url="";
			if(self.title=="试卷修改"){
				url="/exam/updataTestPaper"
			}else{
				url="/exam/addTestPaper"
			}
			$.ajax({
				url:url,
				type:"post",
				contentType: "application/x-www-form-urlencoded",
				data:self.testPaper,
				dataType: "json",
				success(data){
					if (data.info=="保存成功"){
						$("#one").modal("hide")
						self.loadData()
					}
				}
			})
		self.loadData();
			closeWin();
		console.log(self.testPaper.testPaperId+"-----------------")
		},
		//关闭模态框
		closeWin:function () {
			$("#one").modal("hide")
		},
			},
			mounted(){
				this.loadData();
			},
		})
	</script>
</html>
